<script setup lang="tsx">
import { reactive, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElUpload, ElIcon } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { formatToDateTime } from '@/utils/dateUtil'

defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})

const dialogVisible = ref(false)
const dialogImageUrl = ref('')

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'realName',
    label: '姓名'
  },
  {
    field: 'phone',
    label: '手机号'
  },
  {
    field: 'idCardNumber',
    label: '身份证号'
  },
  {
    field: 'applicationTime',
    label: '申请时间',
    slots: {
      default: (data: any) => {
        return <>{formatToDateTime(data.applicationTime)}</>
      }
    }
  },
  {
    field: 'fileList',
    label: '相关证件',
    span: 24,
    slots: {
      default: (data: any) => {
        return (
          <ElUpload
            class={'examine-picture-show'}
            file-list={data.fileList}
            list-type={'picture-card'}
            disabled
            on-preview={handlePictureCardPreview}
          >
            <ElIcon></ElIcon>
          </ElUpload>
        )
      }
    }
  }
])

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<template>
  <Descriptions :schema="schema" :data="currentRow || {}" />
  <Dialog v-model="dialogVisible" title="图片预览" :max-height="800">
    <img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
  </Dialog>
</template>
<style lang="less">
.examine-picture-show .el-upload--picture-card {
  display: none;
}
</style>
